<template>
  <el-dialog
  title="初始化医院"
  :visible.sync="initVisible"
  width="20%"
 >
  <div>
    <el-select v-model="locationId" size="small" placeholder="请选择医院" style="width: 100%">
      <el-option
        v-for="item in hospitals"
        :key="item.locationId"
        :label="item.name"
        :value="item.locationId">
      </el-option>
    </el-select>
  </div>
  <span slot="footer" class="dialog-footer">
    <el-button @click="cancel">取 消</el-button>
    <el-button type="primary" :disabled="locationId === ''" :loading="initLoading" @click="initHospital">确 定</el-button>
  </span>
</el-dialog>
</template>

<script>  
import {mapGetters,mapActions} from 'vuex'
import siteApi from '@/network/map/site.api'
export default {
  name: 'InitHospital',
  data() {
    return {
      initVisible: false,
      locationId: '',
      initLoading: false,
    }
  },
  methods: {
    ...mapActions('hospital',['saveHospitals']),
    cancel() {
      this.locationId = ''
      this.initVisible = false
       this.initLoading = false
    },
    initHospital() {
      this.initLoading = true
     siteApi.initMap(this.locationId).then(res => {
        this.initLoading = false
        this.$message({message: '初始化成功',type: 'success',duration: 1000})
     }).catch(err => {
       this.initLoading = false
     })
    }
  },
 computed: {
    ...mapGetters(['hospitals'])
  },
  watch: {
    initVisible(val) {
      if(val && this.hospitals.length < 1) {
        this.saveHospitals()
      } 
    }
  }
}
</script>

